<template>
  <div style="position: relative;cursor: pointer;" @mousemove="showIcon = true;" @mouseleave="showIcon = false;">
    <div @click="modifyItem">
      <knowledge-item-div :type="type" :content="content" size-type="small"></knowledge-item-div>
    </div>
    <i class="el-icon-error" v-if="showIcon" style="position: absolute; top: -5px; right: -13px; font-size: 28px; color: white; text-shadow: 2px 2px 4px #000000;"
        @click="deleteItem">
    </i>
    <add-or-modify-word-dialog :visible.sync="showAddWordForm"></add-or-modify-word-dialog>
    <add-or-modify-grammar-dialog :visible.sync="showAddGrammarForm"></add-or-modify-grammar-dialog>
  </div>
</template>

<script>
import KnowledgeItemDiv from "@/components/KnowledgeItemDiv";
import AddOrModifyWordDialog from "@/components/AddOrModifyWordDialog";
import AddOrModifyGrammarDialog from "@/components/AddOrModifyGrammarDialog";
import {combinedDisplayWord, combinedDisplayGrammar} from "@/utils/stringUtil";
import {deleteEditedWord} from "@/apis/sentence.api";

export default {
  name: "KnowledgeItemDivWithDeleteIcon",
  components: {
    KnowledgeItemDiv,
    AddOrModifyWordDialog,
    AddOrModifyGrammarDialog
  },
  props: {
    type: String,
    data: Object
  },
  computed: {
    content() {
      if (this.isWordType()) {
        return combinedDisplayWord(this.data);
      }
      return combinedDisplayGrammar(this.data);
    },
    videoNum() {
      return this.$store.getters.editedSentenceId.videoNum;
    },
    seq() {
      return this.$store.getters.editedSentenceId.seq;
    }
  },
  data() {
    return {
      showIcon: false,
      showAddWordForm: false,
      showAddGrammarForm: false
    }
  },
  methods: {
    isWordType() {
      return this.type === 'word';
    },
    updateEditedWord(payload) {
      this.$store.commit("updateEditedWord", payload);
    },
    updateEditedGrammar(payload) {
      this.$store.commit("updateEditedGrammar", payload);
    },
    deleteItem() {
      this.$confirm('此操作将删除该知识点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.isWordType()) {
          let res = await deleteEditedWord(this.videoNum, this.seq, this.data.content);
          if (res.data === "success") {
            this.$message({type: 'success', message: '删除成功!'});
            location.reload();
          } else {
            this.$message({type: 'error', message: '删除失败！'});
          }
        }
      }).catch(() => {});
    },
    modifyItem() {
      if (this.isWordType()) {
        this.showAddWordForm = true;
        this.updateEditedWord(this.data);
        return;
      }
      this.showAddGrammarForm = true;
      this.updateEditedGrammar(this.data);
    }
  }
}
</script>

<style scoped>

</style>